<template>
  <div style="height: 100%;">
    <FullScreenContainerScale
      :scrennWidth="scrennWidth"
      :scrennHeight="scrennHeight"
      v-if="type === 'fullScreenContainer'"
    >
      <div class="home" :style="{'background-image': `url(${home[bgSelect]})`}">
        <div class="top_btn">
          <theme-component v-if="showThemeBtn" class="heme_component"/>
        </div>
        <slot name="big-screen-header">
          <twin-screen-header
            :leftList="leftList"
            :rightList="rightList"
            :title="title"
            :english-title="englishTitle"
          />
        </slot>
        <slot name="big-body">
          <div class="warp">
            <el-row type="flex" class="height">
              <el-col
                :span="leftSpan"
                v-if="showLeft"
                :xs="24"
                class="big-left-ctx"
              >
                <slot name="leftContent"/>
              </el-col>
              <el-col
                v-if="showCenter"
                :span="centerSpan"
                :xs="24"
                class="content_center"
              >
                <slot class="content_center" name="centerContent"/>
              </el-col>
              <el-col
                v-if="showRight"
                :span="rightSpan"
                :xs="24"
                class="big-left-ctx"
              >
                <slot name="rightContent"/>
              </el-col>
            </el-row>
            <slot name="fullScreenMap"/>
          </div>
        </slot>
      </div>
    </FullScreenContainerScale>
  </div>
</template>

<script>
import {FullScreenContainerScale, ThemeComponent} from '@/layout/install'
import TwinScreenHeader from "@/views/twinScreen/head.vue";
import '@/layout/index.scss'
import bg3 from '@/layout/bg3.png'


export default {
  name: 'TwinFullScreenContainer',
  components: {
    TwinScreenHeader,
    ThemeComponent,
    FullScreenContainerScale,
  },
  props: {
    title: {
      type: String,
      default: '湖南省农业优势特色产业集群信息系统',
    },
    leftList: {
      type: Array,
      default: () => [],
    },
    rightList: {
      type: Array,
      default: () => [],
    },
    englishTitle: {
      type: String,
      default: 'Smart Garden Overview Screen',
    },
    type: {
      type: String,
      default: '',
    },
    showThemeBtn: {
      type: Boolean,
      default: false,
    },
    leftSpan: {
      type: Number,
      default: 5,
    },
    centerSpan: {
      type: Number,
      default: 14,
    },
    rightSpan: {
      type: Number,
      default: 5,
    },
    showLeft: {
      type: Boolean,
      default: true,
    },
    showRight: {
      type: Boolean,
      default: true,
    },
    showCenter: {
      type: Boolean,
      default: true,
    },
    scrennWidth: {
      type: Number,
      default: 1920,
    },
    scrennHeight: {
      type: Number,
      default: 1080,
    },
    bgSelect: {
      type: String,
      default: 'bg3',
    }
  },
  data() {
    return {
      home: {
        bg3
      }
    }
  },

  methods: {
  },
}
</script>

<style lang="scss" scoped>
.warp{
  // position: fixed !important;
}

.big-left-ctx {
  width: 480px;
  height: 966px;
  border-radius: 5px;
  opacity: 1;
  margin: 1px 1px;
  /* 自动布局 */
  display: flex;
  flex-direction: column;
  padding: 12px 16px;
  gap: 24px;

  /* 背景渐变1 */
  background: linear-gradient(
      180deg,
      rgba(17, 77, 71, 0.3) 0%,
      rgba(22, 53, 50, 0.3) 100%
  );

  z-index: 1;
}

.big-right-ctx {
  width: 420px;
  height: 966px;
  border-radius: 5px;
  opacity: 1;

  /* 自动布局 */
  display: flex;
  flex-direction: column;
  padding: 16px 0px;
  gap: 24px;

  /* 背景渐变1 */
  background: linear-gradient(
      180deg,
      rgba(17, 77, 71, 0.3) 0%,
      rgba(22, 53, 50, 0.3) 100%
  );

  z-index: 1;
}
</style>
